<template>
	<!-- 我的-账号充值-收支明细 -->
	<view class="IncomeAndExpenditureDetails public">
		<view class="main" v-if="count != 0">
			<view class="main-item" v-for="(item) in arr" :key="item.id">
				<view class="main-item-left">
					<view class="typesOf">
						{{ item.type_name }}
					</view>
					<!-- <view class="ConsumptionType">
						外卖消费
					</view> -->
				</view>
				<view class="main-item-right">
					<view class="amountOfMoney" v-if="item.type_name == '会员充值'">
						+ {{ item.account_data }}
					</view>
					<view class="amountOfMoney" v-else>
						- {{ item.account_data }}
					</view>
					<view class="DateTime">
						{{ item.create_time | formatTime }}
					</view>
				</view>
			</view>
		</view>
		<template v-else>
			<view>
				<image style="width: 750rpx;height: 750rpx;"
					src="https://img.zcool.cn/community/01d29258cce264a801219c77ec3f60.png" mode=""></image>
			</view>
		</template>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			arr: [],
			count: 0,
		}
	},
	onLoad() {
		this.accountDetails()
	},
	methods: {
		accountDetails() {
			$api.postAccountDetails({
				// account_type: 'point',
				account_type: 'balance',
				// account_type: 'balance_money',
				status: 'all'
			}).then(res => {
				this.arr = res.data.data.list
				this.count = res.data.data.count
			})
		},
	}
}
</script>

<style lang="less" scoped>
.IncomeAndExpenditureDetails {

	// width: 100%;
	// height: 93vh;
	.main {
		.main-item {
			display: flex;
			justify-content: space-between;
			padding-left: 51rpx;
			padding-right: 59rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #EEEEEE;
			background: white;

			.main-item-left {
				.typesOf {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}

				.ConsumptionType {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 40rpx;
				}
			}

			.main-item-right {
				text-align: right;

				.amountOfMoney {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F14500;
					line-height: 40rpx;
				}

				.DateTime {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 40rpx;
				}
			}

			.main-item:last-child {
				border: none;
			}
		}

	}
}
</style>